/**
 * orr-main-responsive.css
 ******************************************************************************
 * This file contains CSS responsive layout rules for OnlineRaceResults.
 ******************************************************************************
 * @author Andrew R. Taylor
 * @copyright Copyright (c) 2016, End Result Company, LLC
 * @section CSS responsive layout stylesheet for OnlineRaceResults
 ******************************************************************************
 * Index
 * ------------------------------------
 * $1 - General
 * $2 - XXXX-Large Max-Width
 * $3 - XXX-Large Max-Width
 * $4 - XX-Large Max-Width
 * $5 - X-Large Max-Width
 * $6 - Large Max-Width
 * $7 - Medium Max-Width
 * $8 - Small Max-Width
 * $9 - X-Small Max-Width
 * $10 - XX-Small Max-Width
 * $11 - XXX-Small Max-Width
 * $12 - XXXX-Small Min-Width
 * $13 - XXX-Small Min-Width
 * $14 - XX-Small Min-Width
 * $15 - X-Small Min-Width
 * $16 - Small Min-Width
 * $17 - Medium Min-Width
 * $18 - Large Min-Width
 * $19 - X-Large Min-Width
 * $20 - XX-Large Min-Width
 * $21 - XXX-Large Min-Width
 * $22 - XXXX-Large Min-Width
 ******************************************************************************
*/


/**
 **************************************
 * $1 - General
 **************************************
*/

#orr-header {
	left: 0;
	position: fixed;
	right: 0;
}

.lt-ie7 #orr-header,
.ie7 #orr-header,
.ie8 #orr-header {
	position: static;
}

#orr-main {
	padding-top: 52px;
	padding-top: 3.25rem;
}

.lt-ie7 #orr-main,
.ie7 #orr-main,
.ie8 #orr-main {
	padding-top: 0;
}

#orr-header-nav-standard {
	background-position: left center;
	background-repeat: no-repeat;
}

#orr-header-nav-mobile {
	list-style: none;
	position: relative;
}

#orr-header-nav-mobile-menu {}

#orr-header-nav-mobile-menu a {}

#orr-header-nav-mobile-menu li {}

#orr-header-nav-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#orr-header-nav-mobile-menu-button {
	background: none;
	border: 0 none;
	margin: 0;
	outline: 0 none;
	padding: 0;
	vertical-align: middle;
	width: 24px; /* Measurements should be exact */
}

#orr-header-nav-mobile-menu-button .mobile-menu-line {
	display: block;
	height: 4px; /* Measurements should be exact */
	margin: 4px auto; /* Measurements should be exact */
	overflow: hidden;
	position: relative;
	width: 100%;
}

#orr-header-nav-mobile-menu-button .mobile-menu-line:before {
	content: "";
	height: 100%;
	position: absolute;
	-webkit-transition: left 0.4s ease-in-out;
	-moz-transition: left 0.4s ease-in-out;
	-ms-transition: left 0.4s ease-in-out;
	-o-transition: left 0.4s ease-in-out;
	transition: left 0.4s ease-in-out;
	width: 100%;
}

#orr-header-nav-mobile-menu-line-1 {
	background-color: #6bb766;
}

#orr-header-nav-mobile-menu-line-1:before {
	background-color: #036095;
	left: -100%;
}

#orr-header-nav-mobile-menu-line-2 {
	background-color: #f78f1e;
}

#orr-header-nav-mobile-menu-line-3 {
	background-color: #036095;
}

#orr-header-nav-mobile-menu-line-3:before {
	background-color: #6bb766;
	left: 100%;
}

#orr-header-nav-mobile .dropdown-menu {
	position: static;
}

#orr-header-nav-mobile .dropdown-menu.careted:after,
#orr-header-nav-mobile .dropdown-menu.careted:before {
	content: "";
	display: inline-block;
	height: 0;
	position: absolute;
	right: 0;
	-webkit-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-moz-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-ms-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-o-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	visibility: hidden;
	width: 0;
}

#orr-header-nav-mobile .dropdown-menu.careted:after {
	border-bottom: 16px solid #ffffff;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	bottom: -9px;
	z-index: 1002;
}

#orr-header-nav-mobile .dropdown-menu.careted:before {
	border-bottom: 16px solid #acd0f7;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	bottom: -7px;
	z-index: 1001;
}

#orr-header-nav-mobile .dropdown-menu.careted:hover:after,
#orr-header-nav-mobile .dropdown-menu.careted:hover:before,
#orr-header-nav-mobile .dropdown-menu.careted.active:after,
#orr-header-nav-mobile .dropdown-menu.careted.active:before {
	visibility: visible;
}

#orr-header-nav-mobile > .dropdown-menu.active .mobile-menu-line:before,
#orr-header-nav-mobile > .dropdown-menu:hover .mobile-menu-line:before {
	left: 0;
	right: 0;
}

#orr-header-nav-mobile-menu .dropdown-list {
	background-color: #ffffff;
	border: 1px solid #acd0f7;
	min-width: 240px;
	min-width: 15rem;
	max-height: 0;
	overflow: hidden;
	position: absolute;
	text-align: right;
	-webkit-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-moz-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-ms-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	-o-transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	transition: max-height 0.4s ease-in-out,
		visibility 0.4s ease-in-out;
	visibility: hidden;
	width: 100%;
	width: calc(100% - 2px); /* offsets for borders */
}

#orr-header-nav-mobile-menu .dropdown-list.right {
	right: 0;
}

#orr-header-nav-mobile-menu .dropdown-list li {
	padding: 4px 16px;
	padding: 0.25rem 1rem;
}

#orr-header-nav-mobile-menu .dropdown-list a {
	color: #f78f1e;
}

#orr-header-nav-mobile > .dropdown-menu.active .dropdown-list,
#orr-header-nav-mobile > .dropdown-menu:hover .dropdown-list {
	max-height: 640px;
	max-height: 40rem;
	visibility: visible;
}

#orr-header-nav-mobile > .dropdown-menu.careted .dropdown-list {
	margin-top: 7px;
	margin-top: 0.5rem; /* Is slightly off at 0.4375rem */
}

#orr-header-nav-mobile-logo {
	vertical-align: middle;
}


/**
 **************************************
 * $2 - XXXX-Large Max-Width
 **************************************
*/

@media (max-width: 100rem) {

}


/**
 **************************************
 * $3 - XXX-Large Max-Width
 **************************************
*/

@media (max-width: 90rem) {

}


/**
 **************************************
 * $4 - XX-Large Max-Width
 **************************************
*/

@media (max-width: 80rem) {

}


/**
 **************************************
 * $5 - X-Large Max-Width
 **************************************
*/

@media (max-width: 70rem) {

}


/**
 **************************************
 * $6 - Large Max-Width
 **************************************
*/

@media (max-width: 60rem) {

	#orr-header-nav-mobile-menu li {
		margin: 0 auto;
	}

	#orr-main #orr-featured-events {
		float: none;
		margin: 24px auto !important;
		margin: 1.5rem auto !important;
		width: auto;
	}

	#orr-main #orr-featured-events-list {
		height: 240px;
		height: 15rem;
		overflow-x: auto;
		overflow-y: visible;
		white-space: nowrap;
	}

	#orr-main #orr-featured-events-list .featured-event {
		border-left: 1px solid #cfcfcf;
		border-top: 0 none;
		display: inline-block;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		vertical-align: top;
	}

	#orr-main #orr-featured-events-list .featured-event.first {
		border-left: 0 none;
	}

	#orr-main #orr-featured-events-list .featured-event-logo {
		display: inline-block;
		vertical-align: top;
	}

	#orr-main #orr-featured-events-list .featured-event-description {
		display: inline-block;
		white-space: normal;
	}
}


/**
 **************************************
 * $7 - Medium Max-Width
 **************************************
*/

@media (max-width: 50rem) {

	#orr-footer #orr-footer-nav-list-1 {
		margin-right: 16px;
		margin-right: 1rem;
	}

	#orr-footer #orr-footer-nav-list-2 {
		margin-left: 16px;
		margin-left: 1rem;
		margin-right: 0;
	}

	#orr-footer-nav-app-list {
		text-align: center;
	}

	#orr-footer-legal {
		margin-top: 16px;
		margin-top: 1rem;
		text-align: center;
	}

	#orr-footer-affiliates span {
		display: block;
	}

	#orr-footer-affiliates a {
		margin-left: 8px;
		margin-left: 0.5rem;
		margin-right: 8px;
		margin-right: 0.5rem;
	}

	#orr-main #orr-event-logo-container,
	#orr-main #orr-event-information .info-block {
		margin-left: auto;
		margin-right: auto;
	}
}


/**
 **************************************
 * $8 - Small Max-Width
 **************************************
*/

@media (max-width: 40rem) {

	#orr-main {
		padding-top: 48px;
		padding-top: 3rem;
	}

	#orr-main #orr-main-banner {
		text-align: center;
	}

	#orr-main #orr-main-banner-logo img {
		padding-right: 20px;
		padding-right: 1.25rem;
	}

	#orr-main #orr-main-banner-promo {
		text-align: inherit;
	}
}


/**
 **************************************
 * $9 - X-Small Max-Width
 **************************************
*/

@media (max-width: 30rem) {

	#orr-footer #orr-footer-nav-list-1 {
		margin-bottom: 0;
		margin-right: 0;
	}

	#orr-footer #orr-footer-nav-list-2 {
		border-top: 0 none !important;
		margin-bottom: 32px;
		margin-bottom: 2rem;
		margin-left: 0;
	}
}


/**
 **************************************
 * $10 - XX-Small Max-Width
 **************************************
*/

@media (max-width: 20rem) {

}


/**
 **************************************
 * $11 - XXX-Small Max-Width
 **************************************
*/

@media (max-width: 10rem) {

}


/**
 **************************************
 * $12 - XXXX-Small Min-Width
 **************************************
*/

@media (min-width: 0) {

	html {
		font-size: 90%;
	}

	body {
		min-width: 320px;
		min-width: 20rem;
	}
}


/**
 **************************************
 * $13 - XXX-Small Min-Width
 **************************************
*/

@media (min-width: 10rem) {

}


/**
 **************************************
 * $14 - XX-Small Min-Width
 **************************************
*/

@media (min-width: 20rem) {

}


/**
 **************************************
 * $15 - X-Small Min-Width
 **************************************
*/

@media (min-width: 30rem) {

}


/**
 **************************************
 * $16 - Small Min-Width
 **************************************
*/

@media (min-width: 40rem) {

	html {
		font-size: 100%;
	}
}


/**
 **************************************
 * $17 - Medium Min-Width
 **************************************
*/

@media (min-width: 50rem) {

}


/**
 **************************************
 * $18 - Large Min-Width
 **************************************
*/

@media (min-width: 60rem) {

}


/**
 **************************************
 * $19 - X-Large Min-Width
 **************************************
*/

@media (min-width: 70rem) {

}


/**
 **************************************
 * $20 - XX-Large Min-Width
 **************************************
*/

@media (min-width: 80rem) {

}


/**
 **************************************
 * $21 - XXX-Large Min-Width
 **************************************
*/

@media (min-width: 90rem) {

}


/**
 **************************************
 * $22 - XXXX-Large Min-Width
 **************************************
*/

@media (min-width: 100rem) {

}